<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-22 14:32:05
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-28 14:30:58
 * @FilePath: \巡检管理系统\巡检轨迹详情
-->
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { ElMessage } from 'element-plus'
import { onMounted, PropType, ref } from 'vue'
const lng = ref(0)
const lat = ref(0)
const drawData = ref([])
function initMap() {
  AMapLoader.load({
    key: 'cdaa418d97b829c9ca7590fa62799ac5', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.MoveAnimation', 'AMap.MouseTool', 'AMap.Polygon', 'AMap.PolygonEditor'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    const map = new AMap.Map('container', {
      resizeEnable: true,
      //设置地图容器id
      viewMode: '2D', //是否为3D地图模式
      zoom: 12, //初始化地图级别
      center: [117.12012806, 36.64766208] //初始化地图中心点位置
    })
    const mouseTool = new AMap.MouseTool(map)
    mouseTool.polygon({
      strokeColor: '#FF33FF',
      strokeOpacity: 1,
      strokeWeight: 6,
      // strokeOpacity: 0.2,
      fillColor: '#1791fc',
      fillOpacity: 0.4,
      // 线样式还支持 'dashed'
      strokeStyle: 'solid'
      // strokeStyle是dashed时有效
      // strokeDasharray: [30,10],
    })
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function (e) {
      lng.value = e.lnglat.getLng()
      lat.value = e.lnglat.getLat()
    })
    const polygon = new AMap.Polygon({
      path: JSON.parse(props.currentRow.drawData),
      strokeColor: '#FF33FF',
      strokeWeight: 6,
      strokeOpacity: 0.2,
      fillOpacity: 0.4,
      fillColor: '#1791fc',
      zIndex: 50,
      bubble: true
    })
    map.add([polygon])
    map.setFitView()
    const polyEditor = new AMap.PolygonEditor(map, polygon)
    polyEditor.open()
    mouseTool.on('draw', function (event) {
      drawData.value = event.obj._opts.path
      ElMessage.success('已绘制完成')
    })
  })
  // .catch((e:any) => {});
}
onMounted(async () => {
  initMap()
})

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})
const submit = async () => {
  const formData = props.currentRow
  formData['drawData'] = JSON.stringify(drawData.value)
  return formData
}
defineExpose({
  submit
})
</script>

<template>
  <div style="height: 100%; width: 100%; position: relative">
    <div id="container" style="height: 400px; width: 100%"></div>
    <p class="location">当前选中坐标为（{{ lng }},{{ lat }}）</p>
  </div>
</template>
<style scoped>
.location {
  width: 300px;
  height: 40px;
  background: white;
  position: absolute;
  top: 5px;
  padding: 0rem 0.75rem;
  left: 5px;
  border-radius: 0.4rem;
  line-height: 40px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
}
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
}
.amap-copyright,
.amap-logo {
  display: none !important;
}
.input-card .btn:last-child {
  margin-right: 0;
}
</style>
